/***********************************************************
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License
 **********************************************************/
@import 'variables';
@import 'themes';

@media screen and (min-width: $screenSize) {
    .header {
        display: grid;
        grid-template-areas: 'title search notifications settings questions';
        grid-template-columns: 1fr 150px 100px;
        line-height: 20px;
        height: 45px;
        .title {
            margin-top: 10px;
        }
    }
}
@media screen and (max-width: $screenSize) {
    .header {
        margin-bottom: 3px;
        padding-bottom: 3px;
        .title {
            padding-bottom: 5px;
        }
    }
}

.header {
    width: 100%;

    .title {
        grid-area: title;

        margin-left: 10px;
        font-size: 18px;
        font-weight: 600;
    }
    .ms-Button {
        background: transparent;
        height: 100%;
    }
    @include themify($themes) {
        color: themed('headerTitleColor');
        background-color: themed('headerBackgroundColor');
        .title {
            color: themed('headerTitleColor');
        }
        .ms-Button {
            color: themed('headerButtonColor');
        }
        .active {
            background-color: themed('headerActiveBackgroundColor');
        }
    }
}